<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Extends Option 扩展选项</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Extends Option 扩展选项</h1>
<hr>
<div id="app">
    {{num}}
    ${num}
    <p>
        <button @click="add">更新</button>
    </p>
</div>
<script type="text/javascript">
    var extendsObj = {
      updated () {
        console.log('我是扩展的updated')
      },
      //扩展的对象里面方法不会被执行
      methods:{
        add () {
          console.log('我是扩展的add方法')
          this.num++;
        }
      }
    }
  var app = new Vue({
    el: '#app',
    data: {
      num: 1
    },
    updated () {
      console.log('我是原生的updated')
    },
    methods: {
      add () {
        console.log('我是原生的add方法')
        this.num++;
      }
    },
    //与mixins不同，此处是对象
    extends:extendsObj,
    //指定参数替换标签原生是{{}}
    delimiters:['${','}']
  })
</script>
</body>
</html>